<template>
  <div>
    <div class="box">
      <div class="jk">
        <van-search @search="add" class="sea" v-model="searchvalue" :placeholder="defaultKeyword.keyword" /><span class="sp" @click="qxclick">取消</span>
      </div>
      
       <div class="box-list">
         <h3>历史记录</h3>
         <p class="van-icon van-icon-delete" style="font-size: 24px;"></p>
           <div class="box-get"><span v-for="(item,index) in historyKeywordList" :key="index">{{item}}</span></div>
       </div>

       <div class="box-list">
         <h3>热门搜索</h3>
           <div class="box-get"><span v-for="(item,index) in hotKeywordList" :key="index">{{item.keyword}}</span></div>
       </div>
    </div>
    
  </div>
</template>

<script>
import {GetSearchData,GetHomeData} from "../../request/api"
export default {
  data() {
    return {
      searchvalue: '',
      defaultKeyword:'',
      historyKeywordList:[],
      hotKeywordList:[],
      Dataarr:[]
    };
  },
  created(){
      GetSearchData().then((res)=>{
          let {defaultKeyword,historyKeywordList,hotKeywordList}=res.data
          this.defaultKeyword=defaultKeyword
          this.historyKeywordList=historyKeywordList
          this.hotKeywordList=hotKeywordList
      })
  },
  methods:{
    qxclick(){
      // console.log(1);
      this.$router.go(-1)
    },
    add(){
      // console.log(1);
      GetHomeData().then((res) => {
      // console.log(res.data);
      this.Dataarr=res.data
      console.log(this.Dataarr,1111111111111111111);
      
      
    });
    }
  }
};
</script>
 
<style lang = "less" scoped>
.box {
  background-color: #efefef;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.jk{
  background-color: #fff;
  .sea{
  display: inline-block;
  width: 90%;
}
.sp{
  display: inline-block;
  text-align: center;

}
}

.box-list{
  background-color: #fff;
  width: 100%;
  /* height: 70px; */
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
  h3{
    display:inline-block;
    font-size: 20px;
    margin-top: 10px;
    
  }
  p{
    position: absolute;
    right: 10px;
    top: 10px;
    
  }
  .box-get{
    /* width: 34px;
    height: 20px;
    border: 1px solid #ccc; */
    margin-top: 10px;
    
    span{
    display: inline-block;
    margin: 5px 10px;
    border: 1px solid #ccc;
    padding: 10px 10px;
    }
  }
}
</style>